import { PlusOutlined, DeleteOutlined, LoadingOutlined } from "@ant-design/icons";
import { Image } from "antd";
import classNames from "classnames";
import { useEffect, useState } from "react";
import { MarginPaddingSize } from "../Container/Dev";
import { TitlePosition } from "../Title/Dev";
import { useCurrentComponent } from "../../../../hooks/useCurrentComponent";
import { findComponentById } from "../../../../store";

type ImageUploadProps = {
  id: number;
  position: TitlePosition;
  margin: MarginPaddingSize;
  padding: MarginPaddingSize;
  borderRadius: number;
  width: number | string;
  height: number | string;
};

const marginMap = {
  [MarginPaddingSize.small]: 'm-2',
  [MarginPaddingSize.medium]: 'm-4',
  [MarginPaddingSize.large]: 'm-6',
};

const paddingMap = {
  [MarginPaddingSize.small]: 'p-2',
  [MarginPaddingSize.medium]: 'p-4',
  [MarginPaddingSize.large]: 'p-6',
};

const positionMap = {
  [TitlePosition.left]: 'text-left',
  [TitlePosition.center]: 'text-center',
  [TitlePosition.right]: 'text-right',
};

const Dev = (props: ImageUploadProps) => {
  const { 
    id,
    position = TitlePosition.center,
    margin = MarginPaddingSize.medium,
    padding = MarginPaddingSize.medium,
    borderRadius = 0,
    width = 104,
    height = 104
  } = props;
  
  const { curComponet } = useCurrentComponent({ id });
  const [loading, setLoading] = useState(false);
  const [currentUrl, setCurrentUrl] = useState<string | undefined>();

  useEffect(() => {
    if (curComponet && curComponet.props.upload !== currentUrl) {

      setLoading(true);
      // 模拟图片加载效果，真实场景中可以监听图片的onLoad事件
      const timer = setTimeout(() => {
        setLoading(false);
        setCurrentUrl(curComponet.props.upload);
      }, 800);
      
      return () => clearTimeout(timer);
    }
  }, [curComponet]);

  const containerCls = classNames(
    'relative',
    marginMap[margin],
    paddingMap[padding],
    positionMap[position],
    'inline-block' // 添加inline-block保证容器宽度自适应内容
  );

  const imageStyle = {
    width: typeof width === 'number' ? `${width}px` : width,
    height: typeof height === 'number' ? `${height}px` : height,
    borderRadius: `${borderRadius}px`,
  };

  const uploaderCls = classNames(
    'border-2 border-dashed border-gray-300',
    'hover:border-blue-500 bg-white hover:bg-gray-50',
    'transition-all flex flex-col items-center justify-center',
    'cursor-pointer'
  );

  return (
    <div 
      data-component-id={id} 
      className={containerCls}
      style={{ width: imageStyle.width }}
    >
      {/* 加载状态 */}
      {loading && (
        <div className="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center z-10">
          <LoadingOutlined className="text-2xl text-white animate-spin" />
        </div>
      )}

      {/* 根据url显示不同内容 */}
      {currentUrl ? (
        <div className="relative w-full h-full overflow-hidden group">
          <Image
            src={currentUrl}
            preview={true}
            className="object-cover"
            style={{
              width: '100%',
              height: imageStyle.height,
              borderRadius: imageStyle.borderRadius
            }}
          />
          
          {/* 悬停操作层 */}
          <div className="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-all">
            <div className="opacity-0 group-hover:opacity-100 transition-opacity absolute top-2 right-2 bg-white rounded-full p-1 shadow-lg hover:shadow-xl cursor-pointer">
              <DeleteOutlined className="text-red-500 text-base" />
            </div>
          </div>
        </div>
      ) : (
        <div 
          className={uploaderCls}
          style={{ height: imageStyle.height }}
        >
          <PlusOutlined className="text-gray-400 text-xl mb-1.5" />
          <span className="text-xs text-gray-400">上传图片</span>
        </div>
      )}
    </div>
  );
};

export default Dev;
